<template>
	<view class="page-navbar">
		<view class="box">
			<view class="icons left" v-if="options.leftIcons.length">
				<view
					class="icon"
					@click="one.clickCallBack ? one.clickCallBack() : ''"
					v-for="(one, index) of options.leftIcons"
					:key="index"
				>
					<view v-if="one.icon" @click=" ['icon-arrowleft' , 'icon-left'].includes(one.icon) ? back() : ''" class="iconfont" :class="[one.icon]"></view>
					<image v-else-if="one.imageUrl" :src="one.imageUrl" mode=""></image>
				</view>
			</view>
			<view class="tabs" v-if="options.tabs">
				<view
					class="tab"
					:class="[options.tabs.active == one.active ? 'active' : '']"
					@click="clickBtn(one, index)"
					v-for="(one, index) of options.tabs.list"
					:key="index"
				>
					{{ one.text }}
				</view>
			</view>
			<view
				v-else
				class="center"
				@click="options.center.clickCallBack ? options.center.clickCallBack() : ''"
			>
				{{ options.center.text }}
			</view>
			<view class="icons right" v-if="options.rightIcons.length">
				<view
					class="icon"
					@click="one.clickCallBack ? one.clickCallBack() : ''"
					v-for="(one, index) of options.rightIcons"
					:key="index"
				>
					<view v-if="one.icon" class="iconfont" :class="[one.icon]"></view>
					<image v-else-if="one.imageUrl" :src="one.imageUrl" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		options: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			active: null
		};
	},
	methods: {
		back(){
			uni.navigateBack()
		},
		clickBtn(one, index) {
			one.clickCallBack ? one.clickCallBack() : '';
			this.options.tabs.active = one.active;
		}
	},
	created() {}
};
</script>

<style lang="scss" scoped="scoped">
.page-navbar {
	box-shadow: 0 10upx 20upx rgba($color: #000000, $alpha: 0.05);
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background-color: #fff;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	padding-top: var(--status-bar-height);
	.box {
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.center {
			font-size: 34upx;
			flex: 1;
			text-align: left;
			padding: 0 20upx;
			height: 90upx;
			line-height: 90upx;
		}
		.icons {
			padding-left: 20upx;
			height: 90upx;
			display: flex;
			align-items: center;
			&.left {
				padding-left: 20upx;
				.icon,
				image {
					padding-right: 20upx;

					&:last-child {
						padding-right: 0;
					}
				}
			}
			&.right {
				padding-right: 20upx;
				padding-left: 0;
				text-align: right;
				.icon,
				image {
					padding-left: 20upx;
					&:first-child {
						padding-left: 0
					}
				}
			}
			.icon {
				height: 90upx;
				line-height: 90upx;
			}

			image {
				padding: 25upx 0;
				width: 40upx;
				height: 40upx;
				min-width: 40upx;
				min-height: 40upx;
			}
		}

		.tabs {
			flex: 1;
			display: flex;
			align-items: center;
			font-size: $uni-font-size-lg;
			overflow-x: auto;
			height: 90upx;
			margin: 0 20upx;
			overflow-scrolling: touch;
			-webkit-overflow-scrolling: touch;
			.tab {
				height: 82upx;
				line-height: 82upx;
				margin-right: 40upx;
				white-space: nowrap;
				color: #ccc;
				border-bottom: 4upx solid #fff;
				border-top: 4upx solid #fff;

				&.active {
					color: $juhe-active-color;
					position: relative;
					&:after {
						display: block;
						position: absolute;
						bottom: 10upx;
						left: 0;
						right: 0;
						// border-bottom: 4upx solid $juhe-active-color;
						content: ' ';
						opacity: 0.7;
					}
				}
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
}
</style>
